<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../../layui-v2.9.0/layui/css/layui.css" media="all">
    <script src="../../layui-v2.9.0/layui/layui.js"></script>

</head>
<body>
<div style="width: 1380px">

    <ul class="layui-nav layui-col-xs10 layui-col-lg-offset1 layui-bg-gray" style="height: 100px;">
        <li class="layui-form layui-col-xs5" style="margin-top: 25px;margin-left: 250px;display: flex">
            <img src="../img/01.png" style="transform: scale(2);"
                 class="layui-nav-img">
            <input type="text" name="" placeholder="文本框" class="layui-input">
            <button type="button" class="layui-btn layui-bg-blue">蓝色按钮</button>
        </li>

        <li class="layui-nav-item" style="float: right;margin-right: 150px"lay-unselect>
            <a href="javascript:;">
                <img src="https://unpkg.com/outeres@0.0.10/demo/avatar/1.jpg" style="transform: scale(2);margin-top: 30px;"
                     class="layui-nav-img">
            </a>
            <dl class="layui-nav-child">
                <dd><a href="javascript:;">子级菜单</a></dd>
                <dd><a href="javascript:;">横线隔断</a></dd>
                <hr>

                <dd style="text-align: center;"><a href="">退出</a></dd>
            </dl>
        </li>
    </ul>
	<div class="layui-col-xs10 layui-col-lg-offset1" style="height: auto">
        <div class="layui-panel">
            <div style="padding: 32px;display: flex" class="layui-col-xs12 layui-bg-gray">
                <img src="../img/04.jpg" style="transform: scale(2);"
                     class="layui-nav-img">
                <p style="white-space:pre;margin-top: 15px;font-weight: bold;margin-left: 20px;font-size: 20px;" >五位骑岳  </p>
                <p style="white-space:pre;margin-top: 17px"><i class="layui-icon layui-icon-username"></i>在线人数:40    </p>
                <p style="margin-top: 17px"><i>帖子<span class="layui-badge">4000</span></i>
                <p style="white-space:pre;">      </p>
                <button type="button" id="guanzhu" class="layui-btn layui-bg-blue layui-btn-small">关注</button>
            </div>
            <div class="layui-col-xs12 layui-bg-gray" style="height: 20px;" >
                <ul class="layui-nav layui-bg-gray">
                    <li class="layui-nav-item"><a href="">看帖</a></li>
                    <li class="layui-nav-item"><a href="">吧主推荐</a></li>
                </ul>
            </div>
            <div class="layui-bg-gray" id="top-tiezi" style="margin-top: 50px;width: 850px;height:auto;float: left" >
<!--                <div class="layui-bg-gray"  style="padding: 16px;">-->
                <div id="commentsContainer" class="layui-row layui-col-space15">
                    <!--                    这里是自己刚发表的评论-->
                    <div id="frist" class="layui-col-xs12 ">
                        <div class="layui-card-header"  style="display: flex">
                            <img src="../img/05.jpg" class="layui-nav-img">
                            <p class="user";>
                                <a href="" class="user-mes1">小马宝莉  </a>
                                <a href="comment.html" style="color: #1e9fff" class="post-tit1">威龙和显卡爪刀选哪个？</a>
                            </p>
                        </div>
                        <div class="layui-card-body"style="font-size: 18px;">
                            <p id="MyComment"></p>
                            <div >
                                <img src="../img/02.jpg" class="layui-card-img">


                            </div>
                        </div>
                    </div>
                </div>
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md12 " id="ID-flow-demo-manual">
                            <div class="layui-card">
<!--                                <div class="layui-card-header"  style="display: flex">-->
<!--                                    <img src="../img/01.png" class="layui-nav-img">-->
<!--                                    <p class="user";>-->
<!--                                        <a href="" class="user-mes1">小马宝莉  </a>-->
<!--                                        <a href=""style="color: #1e9fff" class="post-tit1">威龙和显卡爪刀选哪个？ </a>-->
<!--                                    </p>-->
<!--                                </div>-->
<!--                                <div class="layui-card-body"style="font-size: 18px;">-->
<!--                                    还有就是波普寮犬可以入吗？比归零者哪个好？<br>-->
<!--                                    <div >-->
<!--                                        <img src="../img/02.jpg" class="layui-card-img">-->
<!--                                        <div style="display: flex">-->
<!--                                            <li class="layui-icon layui-icon-praise" id="thumbs"data-target="thumbs" style="font-size: 30px; margin-bottom:20px;margin-left: 670px"  ></li>-->
<!--                                            <li class="layui-icon layui-icon-reply-fill" style="font-size: 27px; margin-bottom: 20px;margin-left: 40px"  lay-on="test-iframe-curl"></li>-->

<!--                                        </div>-->

<!--                                    </div>-->
<!--                                </div>-->

                                <div class="layui-cols-xs12 layui-bg-gray"  style="height: 50px">

                                </div>

                            </div>
                        </div>
<!--                    </div>-->

                </div>
                <!--                    //下面是评论画板区-->
                <div class="layui-row layui-col-space15" id="commentArea">
                    <div class="layui-col-md12 " >
                        <div class="layui-card">
                            <div class="layui-card-header"  style="display: flex">
                                <img src="../img/01.png" class="layui-nav-img" >
                                <p class="user";>
                                    <a href="" class="user-mes1 layui-icon-hover">小马宝莉  </a>
                                </p>
                            </div>
                            <div class="layui-card-body"style="font-size: 18px;">
                                <div class="layui-upload">
                                    <button type="button" class="layui-btn" id="upload-img">
                                        <i class="layui-icon layui-icon-upload"></i> 图片上传
                                    </button>
                                    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 11px;">
                                        预览图：
                                        <div class="layui-upload-list" id="upload-demo-preview"></div>
                                    </blockquote>
                                </div>
                                <div class="layui-form">
                                    <label>
                                        <input id="titleInput" type="text" name="" placeholder="标题......" class="layui-input">
                                    </label>
                                </div>
                                <div class="layui-form">
                                    <label>
                                        <textarea id="commentInput" name="" placeholder="内容......" class="layui-textarea"></textarea>
                                    </label>
                                </div>

                                <div class="layui-btn-container">

                                    <button type="button" class="layui-btn layui-btn-normal" onclick="postComment()">发表</button>

                                </div>
                            </div>

                            <div class="layui-cols-xs12 layui-bg-gray"  style="height: 50px">

                            </div>

                        </div>
                    </div>
                </div>


            </div>




            <div class="layui-col-xs3 layui-col-xs-offset1 layui-bg-gray" style="margin-top: 50px;height:auto;float: right;margin-left: 0">
                <div class="layui-bg-gray" style="height:auto">
                    <div >
                        <h3 style="text-align: center" class="mbx">分类</h3>
                        <hr>
                        <span class="layui-breadcrumb span_css" lay-separator=" ">
                    <p class="p_index">
                      <a href="" class="a_index1">首页</a>
                      <a href="" class="a_index1">国际新闻</a>
                    </p>
                    <p class="p_index">
                  <a href="" class="a_index1">亚太地区</a>
                  <a><cite>正文</cite></a>
                    </p>
                </span>
                    </div>
                    <div>
                        <h3 style="text-align: center" class="mbx">门户频道</h3>
                        <hr>
                        <span class="layui-breadcrumb span_css" lay-separator=" ">
                    <p class="p_index">
                      <a href="" class="a_index1">娱乐</a>
                      <a href="" class="a_index1">八卦</a>
                      <a href="" class="a_index1">体育</a>
                    </p>
                    <p class="p_index">
                      <a href="" class="a_index1">搞笑</a>
                      <a href="" class="a_index1">视频</a>
                      <a href="" class="a_index1">游戏</a>
                    </p>
                    <p class="p_index">
                        <a href="" class="a_index1">综艺</a>
                    </p>
                </span>
                    </div>

                    <!--        贴吧分类-->
                    <div style="margin-top: 30px">
                        <h6>趣点分类 </h6>  <hr>
                    </div>
                    <div class="div_index">
                        <i class="layui-icon layui-icon-rate-solid"></i> 娱乐明星
                        <span class="layui-breadcrumb" lay-separator=" ">
                    <p class="p_index">
                      <a href="" class="a_index3">网络红人</a>
                      <a href="" class="a_index3">娱乐明星</a>
                      <a href="" class="a_index3">导演</a>
                    </p>
                    <p class="p_index">
                      <a href="" class="a_index3">时尚人物</a>
                      <a href="" class="a_index3">明星</a>
                      <a href="" class="a_index3">粉丝组织</a>
                    </p>
                </span>
                    </div>
                    <hr>
                    <div class="div_index">
                        <img class="img-index" src="../img/体育.png" alt="!"> 体育
                        <span class="layui-breadcrumb" lay-separator=" ">
                    <p class="p_index">
                      <a href="" class="a_index4">足球</a>
                      <a href="" class="a_index4">篮球</a>
                      <a href="" class="a_index4">乒乓球</a>
                    </p>
                    <p class="p_index">
                      <a href="" class="a_index4">网球</a>
                      <a href="" class="a_index4">舞蹈</a>
                      <a href="" class="a_index4">健身</a>
                    </p>
                </span>
                    </div>
                    <hr>
                    <div class="div_index">
                        <img class="img-index" src="../img/游戏.png" alt="!"> 游戏
                        <span class="layui-breadcrumb" lay-separator=" ">
                    <p class="p_index">
                      <a href="" class="a_index4">单机</a>
                      <a href="" class="a_index4">网游</a>
                      <a href="" class="a_index4">手游</a>
                    </p>
                    <p class="p_index">
                      <a href="" class="a_index4">休闲</a>
                      <a href="" class="a_index4">竞技</a>
                      <a href="" class="a_index4">MOBA</a>
                    </p>
                </span>
                    </div>
                    <hr>
                    <div class="div_index">
                        <img class="img-index" src="../img/01.png" alt="!">  闲·趣
                        <span class="layui-breadcrumb layui-font-black" lay-separator=" ">
                    <p class="p_index">
                      <a href="" class="a_index4">萌宠</a>
                      <a href="" class="a_index4">吐槽</a>
                      <a href="" class="a_index4">重口味</a>
                    </p>
                    <p class="p_index">
                      <a href="" class="a_index4">星座</a>
                      <a href="" class="a_index4">恐怖</a>
                      <a href="" class="a_index4">喵星人</a>
                    </p>
                </span>
                    </div>

                    <hr>
                    <div class="div_index">
                        <img class="img-index" src="../img/动漫.png" alt="!">  动漫宅
                        <span class="layui-breadcrumb layui-font-black" lay-separator=" ">
                    <p class="p_index">
                      <a href="" class="a_index3">国产动漫</a>
                      <a href="" class="a_index3">日本动漫</a>
                      <a href="" class="a_index3">玄幻</a>
                    </p>
                    <p class="p_index">
                      <a href="" class="a_index3">搞笑漫画</a>
                      <a href="" class="a_index3">热血动漫</a>
                      <a href="" class="a_index3">推理</a>
                    </p>
                </span>
                    </div>
                </div>


            </div>
        </div>

    </div>



</div>
<script>
    layui.use(['jquery'], function(){
        var $ = layui.jquery;

        // 设置按钮点击事件
        $('#guanzhu').click(function(){
            // 将按钮的背景色改为灰色
            $(this).css('background-color', '#ccc'); // 灰色背景色，你可以根据需要调整

            // 如果你还想改变按钮的样式类（比如移除蓝色背景类），可以这样做：
            $(this).removeClass('layui-bg-blue');

            // 阻止按钮的默认行为（如果有的话）
            return false;
        });
    });
    // layui.use(function(){
    //     var $ = layui.$;
    //     var layer = layui.layer;
    //     var util = layui.util;
    //     // 事件
    //     util.on('lay-on', {
    //
    //         'test-iframe-curl': function(){
    //             layer.open({
    //                 type: 2,
    //                 title: '评论',
    //                 shadeClose: true,
    //                 maxmin: true, //开启最大化最小化按钮
    //                 area: ['1000px', '550px'],
    //                 content: 'comment.html'
    //             });
    //         }
    //     })
    // });
    //点赞按钮的响应事件
    var isLiked = false; // 用来跟踪按钮状态的变量
    function trance(){
        let thumb = document.getElementsByClassName('thumbs')
        for(let i=0;i<thumb.length;i++){
            if (thumb[i].classList.contains('layui-icon-heart')) {
                // 如果已经被点击过，恢复默认颜色（假设默认颜色是黑色）
                thumb[i].classList.remove('layui-icon-heart'); // 或者设置为您想要的默认颜色，如 'black'
                thumb[i].classList.add('layui-icon-heart-fill');
                isLiked = false; // 重置状态
            } else {
                // 如果未被点击过，设置颜色为红色
                thumb[i].classList.remove('layui-icon-heart-fill'); // 或者设置为您想要的默认颜色，如 'black'
                thumb[i].classList.add('layui-icon-heart');
                isLiked = true; // 更新状态
            }
        }
    }
    function postComment() {
        // 获取输入框的值
        var comment = document.getElementById('commentInput').value;
        var title = document.getElementById('titleInput').value;

        // 如果评论不为空，则添加到评论容器中
        if ((comment.trim() !== '')&& (title.trim() !== '')) {
            // 创建一个新的评论元素
            var newComment = document.createElement('div');
            newComment.classList.add("comment-item"); // 可以添加一个CSS类来美化评论的样式
            newComment.innerHTML = `
            <div class="layui-card-header" style="display: flex">
                <img src="../img/05.jpg" class="layui-nav-img">
                <p class="user">
                    <a href="" class="user-mes1">小马宝莉</a>
                    <a  href="comment.html" style="color: #1e9fff" class="post-tit1">
                    <p >${title}</p></a>
                </p>
            </div>
            <div class="layui-card-body" style="font-size: 18px;">
                <p>${comment}</p>
            </div>
            `;

            // 清空评论输入框的值
            document.getElementById('commentInput').value = '';

            // 将新的评论元素添加到评论容器的顶部
            var commentsContainer = document.getElementById('commentsContainer');
            commentsContainer.insertBefore(newComment, commentsContainer.firstChild);

            // 滚动到页面顶部（如果需要）
            // 注意：这里假设#top-tiezi是您想要滚动到的元素
            var topNav = document.getElementById('top-tiezi');
            if (topNav) {
                window.scrollTo(0, topNav.offsetTop);
            }
        }
    }
    layui.use(function(){
        var flow = layui.flow;
        // 流加载实例
        flow.load({
            elem: '#ID-flow-demo-manual', // 流加载容器
            scrollElem: '#ID-flow-demo-manual', // 滚动条所在元素，一般不用填，此处只是演示需要。
            isAuto: false,
            isLazyimg: true,
            done: function(page, next){ // 加载下一页



                // 模拟插入
                setTimeout(function(){
                    var lis = [];
                    for(var i = 0; i < 2; i++){
                        lis.push('<div class="layui-card">' +
                            '<div class="layui-card-header" style="display: flex">' +
                            '<img src="../img/05.jpg" class="layui-nav-img">' +
                            '<p class="user">' + // 注意这里移除了不必要的分号
                            '<a href="" class="user-mes1">小马宝莉</a>' +
                            '<a href="comment.html" style="color: #1e9fff" class="post-tit1">威龙和显卡爪刀选哪个？</a>' +
                            '</p>' +
                            '</div>' +
                            '<div class="layui-card-body" style="font-size: 18px;">' +
                            '还有就是波普寮犬可以入吗？比归零者哪个好？<br>' +
                            '<div>' +
                            '<img src="../img/02.jpg" class="layui-card-img">' +
                            '<div style="display: flex">' +
                            '<li class="layui-icon layui-icon-heart thumbs" onclick="trance()" data-target="thumbs" style="font-size: 30px; margin-bottom:20px;margin-left: 670px" ></li>' +
                            '<a href="comment.html"><li  class="layui-icon layui-icon-reply-fill" style="font-size: 27px; margin-bottom: 20px;margin-left: 40px" >' +
                            '</li></a>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>')
                    }
                    next(lis.join(''), page < 1000); // 假设总页数为 6
                }, 520);
            }
        });
    });

</script>

<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<style>
    /* styles.css */
    .nav-profile {
    display: flex;
    align-items: center;
    }

    .nav-profile-img {
    position: relative;
    margin-right: 10px;
    }
    a{
    margin-left: 10px;
    }
    .mbx{
    padding: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    }
    .span_css{
    margin-top: 20px
    }
    /*标签导航*/
    .a_index1{
    margin-left: 20px;
    margin-top: 20px;
    /*text-decoration: underline;*/
    }
    .a_index3{
    font-size: 13px;
    width: 5em;
    /*margin-left: 20px;*/
    margin-top: 20px;
    }
    a:hover{
    text-decoration: underline;
    }
    .a_index4{
    font-size: 15px;
    width: 4em;
    margin-left: 10px;
    margin-top: 20px;
    text-align: center;
    }
    .p_index{
    color: black;
    margin-top: 10px;
    }
    .div_index{
    padding: 10px;
    }
    .p_index_color {
    background-color: #dbfbf0; /* 鼠标移入时的背景颜色 */
    }
    /*标签图片*/
    .img-index{
    width: 20px;
    height: 20px;
    }
    hr{
    padding: 0;
    margin: 0;
    }
    .logo_img{
    width: 40px;
    height: 30px;
    }
    h3{
        margin-top: 0;
    }
    .layui-card-img { /* 使用新的类名或确保选择器能覆盖现有样式 */
        width: 200px; /* 假设我们想要将图片宽度设置为200px，您可以根据需要调整 */
        height: auto; /* 保持图片的高宽比 */
        border-radius: 0; /* 移除边框圆角 */
        border: none; /* 如果图片有边框，也移除它 */
        /* 可以添加其他图片样式，比如margin, padding等 */
    }
</style>

</body>
</html>